<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增素材信息' : '编辑素材信息'" width="700px">
    <el-form ref="form" :model="form" size="small" label-width="100px">
      <el-tabs v-model="form.type" type="border-card" style="box-shadow:none">
        <el-tab-pane name="article">
          <span slot="label"><i class="el-icon-link" /> 文章素材</span>
          <el-form-item label="文章链接">
            <el-input v-model="content.article" placeholder="请输入内容">
              <template slot="prepend"><i class="el-icon-link" /> </template>
            </el-input>
          </el-form-item>
          <el-form-item label="文章描述">
            <el-input v-model="form.description" type="textarea" />
          </el-form-item>
          <el-form-item label="封面图片">
            <one-file-upload :default-image="form.thumbnail" :default-css="'min-image-upload'" :default-file-type="new Array('image/jpeg','image/png')" @upload="getThumbnailImage" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="picture">
          <span slot="label"><i class="el-icon-picture" /> 图片素材</span>
          <one-file-upload :default-image="content.picture" :default-file-type="new Array('image/jpeg','image/png')" @upload="getResponseImage" />
        </el-tab-pane>
        <el-tab-pane name="video">
          <span slot="label"><i class="el-icon-video-camera" /> 视频素材</span>
          <one-video-upload :default-video="content.video" @upload="getResponseVideo" />
        </el-tab-pane>
      </el-tabs>
      <div style="width:100%;height:20px;" />
      <el-form-item label="素材标题">
        <el-input v-model="form.title" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import oneFileUpload from '@/views/components/oneFileUpload'
import oneVideoUpload from '@/views/components/oneVideoUpload'

export default {
  components: { oneFileUpload, oneVideoUpload },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      form: {
        id: '',
        type: 'article',
        title: '',
        content: '',
        thumbnail: '',
        description: '',
      },
      content: {
        article: '',
        picture: '',
        video: '',
      },
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    getResponseVideo(response) {
      this.content.video = response.url 
    },
    getResponseImage(response) {
      this.content[this.form.type] = response.url
    },
    getThumbnailImage(response) {
      this.form.thumbnail = response.url
    },
    handleClick() {

    },
    doSubmit() {
      this.loading = true
      this.form.content = this.content[this.form.type]
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    doAdd() {
      this.$api.material.material.add({
        data: this.form
      }).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      this.$api.material.material.edit({
        data: this.form
      }).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.sup_this.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        type: 'article',
        title: '',
        content: '',
        thumbnail: '',
        description: '',
      }
      this.content = {
        article: '',
        picture: '',
        video: '',
      }
    }
  }
}
</script>

<style scoped>

</style>
